<template>
	<view>
		<view class="recommend f-column">
			<view class="list f-column" v-for="(item,index) in list" :key="index">
				<view class="list_item">
					<view class="title">
						<text>{{item.name}}</text>
						<text>¥{{item.price}}</text>
					</view>
					<view class="content">
						<view class="left">
							<view class="item">
								有效期：{{item.start_time.substring(0,10)}} - {{item.end_time.substring(0,10)}}
							</view>
							<!-- {{item.log.slice(0,1)}} -->
							<view class="item" v-for="(son,index1) in item.log.slice(0,1)" :key="index1">
								<text>{{son.card_type_name}}:{{son.number}}次</text>
								<text>剩余:{{son.residue}}次</text>
							</view>
							<view class="item">
								{{item.illustrate}}
							</view>
						</view>
						<view class="right" @click="open(item.log)">
							开启机器
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noMore" v-if="last_page==form.page&&list.length!=0"
			style="text-align: center;color: #797575;margin-top: 20rpx;padding-bottom: 60rpx;">
			数据加载完成
		</view>
		<u-empty text="暂无列表哦~~" mode="list" v-if="list.length==0" margin-top='50'></u-empty>
	</view>
</template>

<script>
	import {
		getAutomatic,
		useAutomatic
	} from '@/request/api.js'
	export default {
		data() {
			return {
				form: {
					id: '',
					page: 1,
					name: '',
					type: ''
				},
				list: [],
				last_page: 1,
			};
		},
		onLoad(res) {
			this.form.type = res.type ? 1 : ''
			this.form.id = res.scene
			this.getList()
		},
		onReachBottom() {
			// console.log(111)
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.getList()
			}
		},
		methods: {
			async open(i) {
				console.log(i)
				let form = {
					mycardlog_id: i[0].id, //洗车类型id
					machineID: this.form.id ,//机器编号
					type:this.form.type
				}
				let res = await useAutomatic(form)
				uni.showToast({
					duration: 1500,
					icon: 'none',
					title: res.msg
				})
				setTimeout(() => {
					this.list = []
					this.form.page = 1
					this.getList()
				}, 1500)

			},
			async getList() {
				let res = await getAutomatic(this.form);
				// console.log(res)
				this.list = this.list.concat(res.data.data)
				this.last_page = res.data.last_page
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recommend {
		padding: 20rpx;

		.list {
			margin-bottom: 20rpx;

			.list_item {
				border-radius: 20rpx;
				padding: 0 20rpx;
				background: linear-gradient(270deg, #2CB9A4 0%, #8EDCD0 100.05%);
				color: #fff;
				display: flex;
				flex-direction: column;
				padding: 20rpx 15rpx;
				font-size: 27rpx;

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-weight: 600;

					text:last-child {
						margin-right: 30rpx;
					}
				}

				.content {
					display: flex;

					.left {
						flex: 1;
						display: flex;
						flex-direction: column;
						font-size: 26rpx;

						.item {
							margin-top: 10rpx;
							display: flex;
							justify-content: space-between;

							&text:last-child {
								margin-left: 30rpx;
							}

							&:last-child {
								font-size: 24rpx;
								margin-top: 20rpx;
							}
						}
					}

					.right {
						width: 140rpx;
						margin: auto;
						text-align: center;
						background: #fff;
						color: #2CB9A4;
						padding: 5rpx 6rpx;
						border-radius: 20rpx;
						margin-left: 20rpx;
					}
				}

			}
		}
	}
</style>